<template>
	<div class="addr">
		<header>
			<router-link to="/mobile/order"><</router-link>
			<h3>修改买家信息</h3>
		</header>
		<table cellspacing='0'>
			<tr>
				<td>姓名:</td>
				<td><input  v-model="usr.name"/></td>
			</tr>
			<tr>
				<td>手机号:</td>
				<td><input  v-model="usr.phone"/></td>
			</tr>
			<tr>
				<td>地址:</td>
				<td><input  v-model="usr.addr"/></td>
			</tr>
			<tr>
				<td colspan="2"><button @click="add()">修改</button></td>
			</tr>
		</table>
	</div>
</template>

<script>
	export default {
		name:'MobileAddr',
		data(){
			return{
				usr:{},
			}
		},
		methods:{
			add(){
				let user={
					nickname:this.usr.name,
					phone:this.usr.phone,
					addr:this.usr.addr,
				}
				this.$postkv('/api/user/updateShip',user).then((resp)=>{
					this.$message({
						message:resp.data.msg,
						type:'success',
					})
				})
			}
		},
		mounted() {
			this.$get('/api/user/shipInfo').then((resp)=>{
				console.log(resp.data.data);
				this.usr =resp.data.data; 
			})
		}
	}
</script>

<style scoped>
	.addr {
		width: 100%;
	}
	.addr header{
		width: 100%;
		height: 4rem;
		display: flex;
		align-items: center;
		border-bottom: 0.0625rem solid black;
	}
	.addr header a{
		color: black;
		font-size: 1.25rem;
		margin-left: 1.25rem;
		margin-right: 25%;
	}
	.addr table{
		width: 90%;
		margin: 0 auto;
	}
	.addr table tr{
		height: 2.5rem;
	}
	.addr table tr td{
		border-bottom: 0.0625rem solid gainsboro;
		border-collapse: 1;
	}
	.addr table input{
		height: 2rem;
		width: 100%;
		border: none;
		outline: none;
	}
	.addr table button{
		width: 12.5rem;
		height: 1.875rem;
		border-radius: 0.3125rem;
		background-color: deepskyblue;
		color: white;
		border: none;
		margin-left: 4rem;
		outline: none;
	}
</style>